<template>
	
	<view class="login_content">
		<view class="basket">
      <view class="logoimage">
      <image src='../../static/images/logo.jpg' class="logo">

      </view>
			
			<view class="appTitle"> 
         <!-- <image style="width:380rpx;height:46rpx" src='../../static/images/wenzi.png' class="logo"> -->
         <text class=""  style="width:380rpx;height:46rpx;margin-top:40rpx">智慧晨光物联网APP管理系统</text>
      </view>
			<view class="username login_input">
				
				<image src="../../static/login/yonghu.png" style="width: 34rpx;height: 36rpx;">
				<input type="text" value="" style="text-indent:4%;" v-model="username" placeholder="请输入您的账号" placeholder-style="font-size: 25rpx;color: #CACACA;" />
			</view>
			<view class="password login_input">
				<image src="../../static/login/mima.png" style="width: 34rpx;height: 36rpx;">
				<input type="password" value="" style="text-indent: 4%;"  v-model="password" placeholder="请输入您的密码" placeholder-style="font-size: 25rpx;color: #CACACA;" />
			</view>
			<view class="rember">
				<u-radio-group  size='20rpx'>
						<u-checkbox v-model="checked"  shape="square" @change='change' :disabled="false"><text  style="margin-left:20rpx">记住密码</text></u-checkbox>
			</u-radio-group>
			</view>
			<view class="login_btn">
<u-button class="" v-if="disable" :ripple="true" ripple-bg-color="#909399"  style="font-size:34rpx;width:100%" @click="login">登录</u-button>
<u-button v-else :ripple="true" ripple-bg-color="#909399"  style="font-size:34rpx" >登录中...</u-button>

				<!-- <button class="submit_btn" @click="login" :disabled='true'>登录</button> -->
			</view>
		</view>

	</view>
</template>

<script>
import { login, userProfileget } from "@/api/index.js";
export default {
  data() {
    return {
      username: "",
      password: "",
      disable: true,
      checked: false
    };
  },
  //生命周期函数
  onLoad: function() {
    // this.cartcount = getApp().globalData.uname
  },
  onShow() {
    const username = uni.getStorageSync("username");
    const password = uni.getStorageSync("password");
    const rember = uni.getStorageSync("rember");
    // console.log(username);
    this.checked = rember;
    // console.log(this.password);
    if (username && password) {
      this.username = username;
      this.password = password;
    } else {
      this.username = "";
      this.password = "";
    }


    // if (rember) {
    //   this.checked = true;
    // }
    // if (!username && !password) {
    // 				this.username = username;
    // 				this.password = password;
    // 			} else {
    // 				this.username = "";
    // 				this.password = "";
    // 			}
  },
  //自定义返回
  onBackPress: function() {
    uni.getSystemInfo({
      success: function(res) {
        // 判断为安卓的手机
        if (res.platform == "android") {
          // 安卓退出app
          plus.runtime.quit();
        } else {
          // 判断为ios的手机，退出App
          plus.ios
            .import("UIApplication")
            .sharedApplication()
            .performSelector("exit");
        }
      }
    });
    return true;
  },
  methods: {
    change() {
      this.checked = !this.checked;
      // console.log(this.checked);
    },
    login() {
      uni.showLoading({
        title: "加载中",
        mask:true
      });
      // this.disable = false;
      if (this.checked) {
        uni.setStorageSync("username", this.username);
        uni.setStorageSync("password", this.password);
        uni.setStorageSync("rember", true);
      } else {
        uni.removeStorageSync("username");
        uni.removeStorageSync("password");
        uni.setStorageSync("rember", false);
      }

      if (!this.username || !this.password) {
        this.disable = true;

        uni.showToast({
          title: "请填写账号和密码",
          icon: "none"
        });
        return;
      }
      const data = {
        username: this.username,
        password: this.password
      };
      login(data).then(res => {
      
        if (res.token) {
            // this.disable = false;
          uni.setStorageSync("token", res.token);
          uni.hideLoading();
          uni.showToast({
            title: "登录成功",
            duration: 2000,
            icon: "none",
            success: () => {
              setTimeout(function() {
                uni.reLaunch({
                  url: "/pages/preview/preview?name=" + data.username
                });
                getApp().globalData.uname = data.username;
                userProfileget().then(res => {
                  uni.setStorageSync("nickName", res.data.nickName);
                  uni.setStorageSync("current", 0);
                        uni.hideLoading();
                });
              }, 1000);
            }
          });
        } else {
          this.disable = true;
          // uni.showToast({
          //   title: "账号或密码错误",
          //   icon: "none"
          // });
        }
      });

      // this.disabled = false;
    }
  }
};
</script>


<style lang="scss" scoped>
.login_content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: url(../../static/images/login.png) no-repeat;
  background-size: 100% 40%;
  background-color: #f6f6f6;
  .basket {
    width: 75%;
    background-color: #ffffff;
    // height: 60%;
    margin-top: 35%;
    padding: 30rpx 70rpx;
    border-radius: 46rpx;
    position: relative;
  }
  .logoimage {
    // display: flex;
    // top: 0rpx;
    position: absolute;
    top: -9%;
    left: 35%;
    background-color: #ffffff;
    border-radius: 46rpx;
    width: 180rpx;
    height: 180rpx;
    // margin: -24% 0rpx -13% 30%;
    box-shadow: 0rpx 24rpx 40rpx #e6e8ff;
  }
}

.appTitle {
  font-size: 50rpx;
  font-weight: 400;
  text-align: center;
  margin: 28% 0rpx 35rpx 0rpx;
}

.login_input {
  // margin: 15rpx;
  display: flex;
  justify-content: start;
  align-items: center;
  border-bottom: 1px solid #cacaca;
  padding: 15rpx 15rpx;

  input {
    height: 60rpx;
    color: #999;
    padding-left: 30rpx;
  }
}

.login_btn {
  // margin-bottom: 1%;
}

.login_btn button {
  width: 100%;
  height: 77rpx;
  color: #f8f5f5;
  background: url(../../static/images/denglubeijing.png) no-repeat;
  background-size: 600rpx 77rpx;
  border-radius: 50rpx;
  font-size: 22rpx;
  padding: 5rpx 0;
  margin-top: 14%;
  margin-bottom: 10%;
}
.logo {
  width: 90%;
  height: 70%;
  margin: 15% 0px 0px 5%;
}
.denglulogo {
  width: 1080rpx;
}
.rember {
  margin-top: 6%;
  padding: 0rpx 16rpx;
}
</style>
